/**
* @作者:陈博宇
* @创建时间：2021/7/13
* @修改时间：2021/7/16
* @修改时间：2021/7/22
*/

<template>
	<view class="main">
		<!-- 头部栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 160rpx; height: 90rpx;" fit="cover" class="logo">
			<view class="navitems">
				<view class="navitem">首页</view>
				<el-badge :value="12" class="navitem" hidden>
					<view>消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 面包屑导航条 -->
		<view class="breadcrumb">
			<view class="breadcrumb_content">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/pages/index/MyGoods'}" style="font-size: 17px">首页
					</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/pages/index/MyGoods'}" style="font-size: 17px">我的订单
					</el-breadcrumb-item>
					<el-breadcrumb-item style="font-size: 17px">订单详情</el-breadcrumb-item>
				</el-breadcrumb>
			</view>
		</view>
		<!-- 步骤条 -->
		<view class="steps">
			<el-steps :active="active" align-center>
				<el-step title="已付款"></el-step>
				<el-step title="待发货"></el-step>
				<el-step title="待收货"></el-step>
				<el-step title="租赁中"></el-step>
				<el-step title="待归还"></el-step>
				<el-step title="归还中"></el-step>
				<el-step title="已完成"></el-step>
			</el-steps>
		</view>
		<!-- 待发货内容 -->
		<view v-if="active === 1" class="stateInfo">
			<!-- 待发货提示 -->
			<view class="stateTitle">
				商品等待您发货
			</view>
			<view style="font-weight: bold;margin-left: 30rpx;margin-top: 15rpx;">
				买家已成功付款，请您尽快发货
			</view>
			<!-- 填写快递信息view -->
			<view style="display: flex; margin-top: 50rpx;">
				<view style="display: flex; margin-left: 30rpx; width: 90%;">
					<view>
						<view style="display: flex;align-items: center;">
							<view style="width: 40%;">
								快递单号：
							</view>
							<el-input type="text" v-model="expressInput" clearable></el-input>
							<view style="width: 40%;margin-left: 5%;">
								快递公司：
							</view>
							<el-select v-model="companyValue" placeholder="请选择" style="width: 60%;">
								<el-option v-for="item in expressCompany" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</view>
					</view>
				</view>
				<view style="width: 10%;">
					<el-button type="primary" @click="confirmDelivery()">确认发货</el-button>
				</view>
			</view>
			<!-- 商家选择返还时的收货地址 -->
			<view class="address" style="margin-top: 50rpx;margin-left: 30rpx">
				<view class="address_box">
					<view class="addressMsg">
						<view>选择收货地址：</view>
					</view>
					<view class="address_content" style="margin-top: 20rpx">
						<el-radio v-model="addressradio" style="height: 80rpx;" v-for="(user,index) in allShopAddress"
							:key="index" :label="index+1">
							{{ user.receiverName }}&nbsp;&nbsp;{{ user.province+user.city+user.town+user.area }}&nbsp;&nbsp;{{ user.detailInfo }}&nbsp;&nbsp;{{ user.phoneNum }}
						</el-radio>
					</view>
				</view>
			</view>
			<!-- 显示买家收货信息 -->
			<view style="margin-left: 30rpx;margin-top: 50rpx;">
				买家收货信息：
				<view style="display: flex;margin-top: 20rpx;">
					<view>
						收货地址：
					</view>
					<view style="color: #808080;">
						{{allOrderDetail.customerTemporaryAddress.province}}-{{allOrderDetail.customerTemporaryAddress.city}}-{{allOrderDetail.customerTemporaryAddress.town}}-{{allOrderDetail.customerTemporaryAddress.area}}-{{allOrderDetail.customerTemporaryAddress.detailInfo}}
					</view>
				</view>
				<view style="display: flex; margin-top: 10rpx;">
					<view>
						电话号码：
					</view>
					<view style="color: #808080;">
						{{allOrderDetail.customerTemporaryAddress.phoneNum}}
					</view>
				</view>
				<view style="display: flex; margin-top: 10rpx;">
					<view>
						收货姓名：
					</view>
					<view style="color: #808080;">
						{{allOrderDetail.customerTemporaryAddress.receiverName}}
					</view>
				</view>
			</view>
		</view>
		<!-- 待收货内容 -->
		<view v-if="active === 2" class="stateInfo">
			<!-- 待收货提示 -->
			<view class="stateTitle">
				等待买家收货
			</view>
			<view style="font-weight: bold;margin-left: 30rpx;margin-top: 15rpx;">
				您已成功发货，等待物流到货
			</view>
			<!-- 物流信息 -->
			<view style="display: flex; margin-top: 50rpx;">
				<view style="margin-left: 30rpx; width: 87%;">
					<view style="display: flex;">
						<view>
							物流单号：
						</view>
						<view style="color: #808080;">
							{{allOrderDetail.logisticsOrder}}
						</view>
					</view>
					<view style="margin-top: 50rpx;">
						物流信息：
					</view>
				</view>
			</view>
			<!-- 物流信息时间条 -->
			<view class="expressLine">
				<el-timeline>
					<el-timeline-item v-for="(activity, index) in allOrderDetail.logisticsInfos" :key="index"
						:timestamp="activity.date">
						{{ activity.statusDescription }}
					</el-timeline-item>
				</el-timeline>
			</view>
		</view>
		<!-- 租赁中信息 -->
		<view v-if="active === 3" class="stateInfo">
			<view class="stateTitle">
				租赁中
			</view>
			<!-- 租赁时间信息 -->
			<view style="display: flex; margin-top: 50rpx;">
				<view style="display: flex; margin-left: 30rpx; width: 90%;">
					<view>
						<view style="display: flex;">
							<view>
								租赁开始时间：
							</view>
							<view style="color: #808080;">
								{{allOrderDetail.leaseStartTime}}
							</view>
						</view>
						<view style="display: flex; margin-top: 50rpx;">
							<view>
								租赁结束时间：
							</view>
							<view style="color: #808080;">
								{{allOrderDetail.leaseEndTime}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 待归还界面信息 -->
		<view v-if="active === 4" class="stateInfo">
			<view class="stateTitle">
				商品待归还
			</view>
			<view style="font-weight: bold;margin-left: 30rpx;margin-top: 15rpx;">
				租赁期已结束，等待买家发货。
			</view>
		</view>
		<!-- 归还中界面信息 -->
		<view v-if="active === 5" class="stateInfo">
			<view class="stateTitle">
				商品归还中
			</view>
			<!-- 归还物流信息 -->
			<view style="display: flex; margin-top: 50rpx;">
				<view style="margin-left: 30rpx; width: 90%;">
					<view style="display: flex;">
						<view>
							物流单号：
						</view>
						<view style="color: #808080;">
							{{allOrderDetail.returnLogisticsOrder}}
						</view>
					</view>
					<view style="margin-top: 50rpx;">
						物流信息：
					</view>
				</view>
				<view>
					<el-button type="primary" @click="returnReceive()">确认收货</el-button>
				</view>
			</view>
			<!-- 归还物流信息时间线 -->
			<view class="expressLine">
				<el-timeline>
					<el-timeline-item v-for="(activity, index) in allOrderDetail.returnLogisticsInfos" :key="index"
						:timestamp="activity.date">
						{{ activity.statusDescription }}
					</el-timeline-item>
				</el-timeline>
			</view>
		</view>
		<!-- 交易完成界面 -->
		<view v-if="active === 6" class="stateInfo">
			<view class="stateTitle">
				租赁交易完成
			</view>
		</view>

		<!-- 订单信息框 -->
		<view class="orderInfo">
			<div class="infoTop">
				订单信息
			</div>
			<!-- 商品信息表格 -->
			<div class="orderTable">
				<el-table :data="table" border style="width: 100%; margin-top: 20px"
					:header-cell-style="{background:'#F5F7FA',color:'#606266'}">
					<el-table-column prop="name" label="商品名">
					</el-table-column>
					<el-table-column prop="src" label="图片">
						<template slot-scope="scope">
							<img :src='"http://47.96.168.135:7388"+scope.row.src' style="width:50px;height:50px;" />
						</template>
					</el-table-column>
					<el-table-column prop="category" label="类别">
					</el-table-column>
					<el-table-column prop="brand" label="品牌">
					</el-table-column>
					<el-table-column prop="paramete" label="配置">
					</el-table-column>
					<el-table-column prop="num" label="数量">
					</el-table-column>
					<el-table-column prop="dailyRent" label="日租">
						<template slot-scope="scope">
							<div>
								<div style="font-size: 18px;color: #ff3e3e;">
									¥{{scope.row.dailyRent}}
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 订单具体信息 -->
			<div class="orderDetail">
				<!-- 买家收货地址 -->
				<div class="orderDetail1">
					<div class="mydetail" style="display: flex">
						<div class="toptips">
							收货地址:
						</div>
						<div class="detailInfo">
							{{allOrderDetail.customerTemporaryAddress.receiverName}}，{{allOrderDetail.customerTemporaryAddress.phoneNum}}，{{allOrderDetail.customerTemporaryAddress.province}}-{{allOrderDetail.customerTemporaryAddress.city}}-{{allOrderDetail.customerTemporaryAddress.town}}-{{allOrderDetail.customerTemporaryAddress.area}}-{{allOrderDetail.customerTemporaryAddress.detailInfo}}
						</div>
					</div>
				</div>
				<!-- 订单其他信息 -->
				<div class="orderDetail2" style="display: flex">
					<div class="orderDetail3">
						<div class="mydetail" style="display: flex">
							<div class="tips">
								订单编号:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.id}}
							</div>
						</div>
						<div class="mydetail" style="display: flex">
							<div class="tips">
								租赁开始时间:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.leaseStartTime}}
							</div>
						</div>
						<div class="mydetail" style="display: flex">
							<div class="tips">
								租赁结束时间:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.leaseEndTime}}
							</div>
						</div>
					</div>
					<div class="orderDetail4">
						<div class="mydetail" style="display: flex">
							<div class="tips">
								下单时间:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.orderDate}}
							</div>
						</div>
						<div class="mydetail" style="display: flex">
							<div class="tips">
								发货物流单号:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.logisticsOrder}}
							</div>
						</div>
						<div class="mydetail" style="display: flex">
							<div class="tips">
								归还物流单号:
							</div>
							<div class="detailInfo">
								{{allOrderDetail.returnLogisticsOrder}}
							</div>
						</div>
					</div>
				</div>
				<!-- 订单价格 -->
				<div class="orderPayInfo">
					<!-- 租金 -->
					<div class="mydetail" style="display: flex">
						<div class="tips">
							商品总价:
						</div>
						<div class="detailInfo">
							¥{{allOrderDetail.sumOfRent}}
						</div>
					</div>
					<!-- 押金 -->
					<div class="mydetail" style="display: flex">
						<div class="tips">
							押金:
						</div>
						<div class="detailInfo">
							¥{{allOrderDetail.sku.skuSpecificationOptions[allOrderDetail.specificationIndex].deposit}}
						</div>
					</div>
					<!-- 实付款 -->
					<div class="mydetail" style="display: flex">
						<div class="tips">
							实付款:
						</div>
						<div class="detailInfo">
							<div style="font-size: 18px;color: #ff3e3e;">
								¥{{allOrderDetail.sumOfMoney}}
							</div>
							<div style="font-size: 10px">
								(商品:¥{{allOrderDetail.sumOfRent}} +
								押金:¥{{allOrderDetail.sku.skuSpecificationOptions[allOrderDetail.specificationIndex].deposit}})
							</div>
						</div>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				thisOrderId: '',

				allOrderDetail: '',

				active: 0,
				expressInput: '',
				expressModify: '',

				expressModifyVisible: false,

				addressradio: 1,
				addressId: 1,
				// 快递公司
				expressCompany: [{
					value: 'sf-express',
					label: '顺丰速运'
				}, {
					value: 'zto',
					label: '中通快递'
				}, {
					value: 'yto',
					label: '圆通快递'
				}, {
					value: 'sto',
					label: '申通快递'
				}, {
					value: 'yunda',
					label: '韵达快递'
				}, {
					value: 'china-post',
					label: '中国邮政'
				}, {
					value: 'china-ems',
					label: '中国 EMS'
				}],
				companyValue: '',
				companyValueModify: '',

				table: [],

				allShopAddress: [],
			}
		},

		mounted: function() {
			this.getOrder();
			this.getShopAddress();
		},

		onLoad(option) {
			if (!this.$cookies.isKey("shopId")) {
				this.$alert('您还未登录，请先登录！', '错误', {
					confirmButtonText: '确定',
				});
				uni.redirectTo({
					url: "ShopLoginIndex"
				})
			}
			this.thisOrderId = option.thatOrderId
		},

		methods: {
			// 获取订单信息
			async getOrder() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Order/getOrderById?Id=' + this.thisOrderId,
				}).then(res => {
					that.allOrderDetail = res.data.date
				}).catch(err => {})
				switch (this.allOrderDetail.state) {
					case '待发货':
						this.active = 1;
						break;
					case '待收货':
						this.active = 2;
						break;
					case '租赁中':
						this.active = 3;
						break;
					case '待归还':
						this.active = 4;
						break;
					case '归还中':
						this.active = 5;
						break;
					case '已完成':
						this.active = 6;
						break;
					case '已购买':
						this.active = 6;
						break;
				}
				// 数据存入配置表格
				let current = {
					src: this.allOrderDetail.sku.skuImages[0].url,
					name: this.allOrderDetail.sku.name,
					brand: this.allOrderDetail.brandName,
					paramete: this.allOrderDetail.sku.skuSpecificationOptions[this.allOrderDetail
						.specificationIndex].value,
					dailyRent: this.allOrderDetail.sku.skuSpecificationOptions[this.allOrderDetail
						.specificationIndex].price,
					num: this.allOrderDetail.num,
					category: this.allOrderDetail.categoryName + '/' + this.allOrderDetail.channelName,
				}
				this.table.push(current);
			},
			//获取商家地址方法
			async getShopAddress() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Address/getAllByBusinessName?BusinessName=' + this.$cookies.get("shopName"),
				}).then(res => {
					that.allShopAddress = res.data.date;
				}).catch(err => {})
			},
			//获取地址id
			getAddressId() {
				this.addressId = this.allShopAddress[this.addressradio - 1].id
			},
			//确认发货
			confirmDelivery() {
				this.getAddressId()
				this.$confirm('确认发货?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						methods: 'get',
						url: "/Order/AddLogisticsOrder?LogisticsOrder=" + this.expressInput +
							"&Logistic=" + this.companyValue + "&orderId=" + this.thisOrderId +
							"&ReturnAddressId=" + this.addressId,
					}).then((res) => {
						this.$message({
							type: 'success',
							message: '发货成功!'
						});
						this.getOrder()
					}).catch(err => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发货'
					});
				});
			},
			// 确认收货
			returnReceive() {
				this.$confirm('是否要确认收货?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						methods: 'get',
						url: "/Order/BusinessReceived?orderId=" + this.thisOrderId,
					}).then((res) => {
						this.$message({
							type: 'success',
							message: '确认成功!'
						});
						this.getOrder();
					}).catch(err => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消收货'
					});
				});
			}
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		// flex-direction: row;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.breadcrumb {
		margin-top: 50rpx;
		width: 100%;
		transform: translateX(100px);
		background-color: #EEEEEE;
		height: 30px;
		transform: translateX(-0px);
		transform: translateY(-3px);
	}

	.breadcrumb_content {
		display: flex;
		width: 100%;
		margin-left: 6%;
		margin-top: 0.1cm;
	}

	.steps {
		margin-top: 30rpx;
	}

	.stateInfo {
		margin-top: 70rpx;
		margin-bottom: 50rpx;
		margin-left: 5%;
		margin-right: 5%;
	}

	.stateTitle {
		margin-left: 30rpx;
		font-size: larger;
		font-weight: bold;
	}

	.expressLine {
		margin-top: 50rpx;
	}

	.orderInfo {
		margin-top: 50rpx;
		margin-bottom: 100rpx;
		margin-left: 5%;
		margin-right: 5%;
		border-style: solid;
		border-radius: 10px;
		border-color: #808080;
	}

	.infoTop {
		margin: 30rpx;
		font-size: larger;
		font-weight: bold;
	}

	.orderTable {
		margin: 30rpx;
	}

	.orderDetail {
		margin: 30rpx;
	}

	.orderDetail1 {
		margin-bottom: 50rpx;
	}

	.orderDetail2 {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.orderDetail3 {
		width: 50%;
	}

	.orderDetail4 {
		width: 50%;
	}

	.mydetail {
		margin-bottom: 30rpx;
	}

	.orderPayInfo {
		width: 50%;
	}

	.toptips {
		width: 10%
	}

	.tips {
		width: 20%
	}

	.detailInfo {
		color: #808080;
	}
</style>
